<template>

    <!-- 登录注册页面 -->
    <div class="userLogin">
        <!--  -->

        <div class="userForm">
            <h2 class="title">帐号登录/注册</h2>
            <el-form v-if="!showLoginOrRegister" :model="registerRuleForm" status-icon label-position="left" ref="ruleForm"
                label-width="85px" class="demo-form-inline">
                <el-form-item label="用户昵称：">
                    <el-input type="type" placeholder="请输入用户昵称" v-model="registerRuleForm.user_name"
                        autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input type="password" placeholder="请输入密码" :show-password="true"
                        v-model="registerRuleForm.user_password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：">
                    <el-input v-model="registerRuleForm.user_email" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="验证码：">
                    <el-input v-model.number="registerRuleForm.code" placeholder="请输入验证码"></el-input>
                    <el-button type="primary" class="code" @click.prevent="sendCode" :disabled="showBtn">{{ btnText
                    }}</el-button>
                    <!-- <el-input ></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> -->
                </el-form-item>

                <div class="btn">
                    <el-button type="primary" class="register" @click="registerMethod">注册</el-button>
                    <el-button class="goBack" @click="goBack">返回</el-button>
                </div>
            </el-form>


            <el-form v-if="showLoginOrRegister" :model="loginRuleForm" status-icon label-position="left" ref="ruleForm"
                label-width="85px" class="login">

                <el-form-item label="邮箱：">
                    <el-input v-model="loginRuleForm.user_account" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="密码：" prop="checkPass">
                    <el-input type="password" placeholder="请输入密码" :show-password="true"
                        v-model="loginRuleForm.user_password" autocomplete="off"></el-input>
                </el-form-item>

                <div class="btn">
                    <el-button type="primary" class="register" @click="loginMethod">登录</el-button>
                    <el-button class="goBack" @click="goBack">返回</el-button>
                </div>
            </el-form>

            <!-- 忘记密码/注册新帐号 -->

            <div class="forget-new-user">
                <!-- <span>忘记密码</span> -->
                <span @click="showLoginOrRegister = !showLoginOrRegister">登录</span>
                <span>|</span>
                <span @click="showLoginOrRegister = !showLoginOrRegister">注册</span>
            </div>
        </div>
    </div>
</template>
  
  
<script>
import { validForm } from '../untils/validForm'

import { sendCode, register, login } from '../http/request'
export default {
    data() {

        return {

            showLoginOrRegister: true,
            // 注册信息收集
            registerRuleForm: {
                // 用户名字、昵称
                user_name: "",
                // 用户密码
                user_password: '',
                //邮箱
                user_email: '',
                // 验证码
                code: ''
            },


            loginRuleForm: {
                // 用户名字、邮箱 1369706358@qq.com
                user_account: "",
                // 用户密码 wwp123456
                user_password: '',
            },

            // 控制按钮倒计时的
            showBtn: false,

            // 倒计时结束的
            timer: null,

            btnText: "发送",

            timerNum: 60

            // 登录时候的


            // 忘记密码的
        }
    },

    created(){
        // console.log(this.$route.query);
        this.showLoginOrRegister=this.$route.query.bol=="true"? true : false

        console.log('this.showLoginOrRegister',this.showLoginOrRegister);
    },

    methods: {
        // 用户注册
        async registerMethod() {

            console.log('registerRuleForm', this.registerRuleForm);
            //构造表单验证信息  注册正则
            let o = {
                user_name: {
                    value: this.registerRuleForm.user_name,
                    errorMsg: '昵称由字母数字下划线汉字组合(1-10字符)',
                    reg: /^[\w\u4e00-\u9fa5]{1,10}$/
                },
                user_password: {
                    value: this.registerRuleForm.user_password,
                    errorMsg: '密码由数字字母下划线组合(6-16字符)',
                    reg: /^[A-Za-z]\w{5,15}$/
                },
                user_email: {
                    value: decodeURIComponent(this.registerRuleForm.user_email),
                    errorMsg: '邮箱格式不对',
                    reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                },
                code: {
                    value: this.registerRuleForm.code,
                    errorMsg: '验证码至少几个',
                    reg: /^\d{6}$/
                },
            };

            let isPass = validForm.valid(o);


            if (!isPass) {
                return
            }

            // 参数进来
            await register(this.registerRuleForm).then(res => {
                console.log('res', res);

                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });

                    this.showLoginOrRegister = !this.showLoginOrRegister
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                //    
                this.$message({
                    message: '出错了',
                    type: 'warning'
                });
            })
        },


        // 发送验证码
        async sendCode() {
            let o = {
                user_email: {
                    value: decodeURIComponent(this.registerRuleForm.user_email),
                    errorMsg: '邮箱格式不对',
                    reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                }
            };

            let isPass = validForm.valid(o);

            if (!isPass) {
                // 验证不通过
                return
            }

            this.btnText = 60;

            // 按钮的话变成 false
            this.showBtn = true;

            this.timer = setInterval(() => {
                this.btnText--;
                if (this.btnText == 1) {
                    this.showBtn = false;
                    this.btnText = '发送';
                    clearInterval(this.timer)
                }
            }, 1000)
            // return


            // 这里面禁止点击一次之后就倒计时开始；


            // 验证 还要做防抖
            // 验证码
            // 调用发送验证的接口
            await sendCode({ email: decodeURIComponent(o.user_email.value) }).then(res => {
                console.log(res);

                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }

                // 显示发送成功
            }).catch(err => {
                // console.log(err);
                //    
                this.$message({
                    message: '出错了',
                    type: 'warning'
                });
            })

        },


        // 登录
        async loginMethod() {
            let o = {
                user_email: {
                    value: this.loginRuleForm.user_account,
                    errorMsg: '邮箱格式不对',
                    reg: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
                },
                user_password: {
                    value: this.loginRuleForm.user_password,
                    errorMsg: '密码由数字字母下划线组合(6-16字符)',
                    reg: /^[A-Za-z]\w{5,15}$/
                },
            };

            let isPass = validForm.valid(o);


            if (!isPass) {
                return
            }

            console.log(111111111);
            // await 

           await login(this.loginRuleForm).then(res=>{
            if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });

                    // 存放对应的token和对应的用户信息
                    localStorage.setItem('useInfo',JSON.stringify(res.data))

                    this.goBack();

                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error'
                    });
                }
            }).catch(err=>{
                this.$message({
                    message: '出错了',
                    type: "error"
                });
            })
        },


        goBack(){
            this.$router.go(-1);
        }
    }


}
</script>
  
<style lang="scss">
.userLogin {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #f7f7f7;

    .userForm {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        padding: 30px;
        width: 400px;
        height: 400px;
        background: white;


        .title {
            padding-bottom: 20px;
            text-align: center;
        }

        .login {
            margin-top: 50px;
        }

        .btn {
            display: flex;
            justify-content: space-around;

            .register,
            .goBack {
                width: 100%;
                text-align: center;
            }


        }

        .code {
            margin-left: 10px;
        }

        .el-form-item__content {
            display: flex !important;
        }


        .forget-new-user {

            margin: 20px auto;
            width: 120px;
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            color: #606674;

            span:hover {
                color: #9095a2;
                text-decoration: underline;
                cursor: pointer;
            }
        }




    }
}
</style>
  